<template>
	<div>
		<!-- 搜索框 -->
		<!-- <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" /> -->
		<!-- 添加广告 -->
		<!-- <r-search :searchHandle="searchHandleAdd" />
		<r-table :isSelection="false" :isPagination="true" :tableData="tableData" :tableCols="tableCols"
			:tablePage="tablePage" @refresh="init()"></r-table> -->
		<!-- 编辑页面 -->
		<!-- <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm"
			labelWidth="200px" dialogWidth="1000px" :isHandle="true" /> -->
		<!-- 测试 -->

		<!-- <div class="video-wrap" style="width:40%;float:left;oveflow:hidden;height: 100px;">
			<iframe
				src="https://changecabinet.yunheznkj.com/profile/upload/2022/01/12/a60abcb1-0bd1-482f-9a4f-a21b1f51cc73.mp4"
				frameborder='0' allow='autoplay;encrypted-media' allowfullscreen style='width:100%;height:500px;'>
			</iframe>
			<h3>视频啊</h3>
		</div> -->
		<div v-for="(item, i) in vedioList" :key="i">
			<video muted="muted" :id="'startvideo' + i" class="video" :src="item.path" type="video/mp4"
				poster="false.png" autoplay="autoplay" controls="controls" loop="-1">
				<p>你的浏览器不支持video标签.</p>
			</video>
		</div>

	</div>
</template>
<script>

export default {
	components: {},
	data() {
		return {
			// 视频数据源
			vedioList: [{ path: "http://vjs.zencdn.net/v/oceans.mp4" }, { path: 'https://changecabinet.yunheznkj.com/profile/upload/2022/01/12/a60abcb1-0bd1-482f-9a4f-a21b1f51cc73.mp4' }],
			// vedioList: [{ path: "http://vjs.zencdn.net/v/oceans.mp4" }, { path: 'https://test.yunheznkj.com/profile/upload/2022/01/12/a60abcb1-0bd1-482f-9a4f-a21b1f51cc73.mp4' }],

			// 请求分页的数据源
			searchData: {
				name: '',
				type: '',
				status: ''
			},
			// 搜索框的格式
			searchForm: [
				{
					type: 'input',
					prop: 'name',
					placeholder: '广告名称',
					width: 150
				},
				{
					type: 'select',
					prop: 'type',
					placeholder: '广告类型',
					width: 150,
					options: [
						{
							label: '图片',
							value: 1
						},
						{
							label: '视频',
							value: 2
						}
					]
				},
				// {
				//   type: 'date',
				//   prop: 'adName',
				//   placeholder: '更新时间',
				//   width: 150
				// },
				{
					type: 'select',
					prop: 'status',
					placeholder: '启用状态',
					width: 150,
					options: [
						{
							label: '启用',
							value: 1
						},
						{
							label: '禁用',
							value: 2
						}
					]
				}
			],
			// 添加广告的数据源
			searchHandleAdd: [
				{
					label: '添加广告',
					type: 'success',
					handle: e => this.elFormVisible()
				}
			],
			// 搜索框的数据源
			searchHandle: [
				{
					label: '搜索',
					type: 'success',
					icon: 'el-icon-search',
					handle: e => this.init()
				},
				// {
				// 	label: '重置',
				// 	icon: 'el-icon-refresh-right',
				// 	handle: e => this.searchFromReset()
				// }
			],
			tableData: [],
			// 分页列表
			tableCols: [
				{
					label: '序号',
					prop: 'id'
				},
				{
					label: '广告名称',
					prop: 'name'
				},
				{
					label: '广告类型',
					prop: 'type',
					formatter: e => {
						return e.type == 1 ? '图片' : '视频'
					}
				},
				{
					label: '广告内容',
					prop: 'url',
					type: 'image'
				},
				{
					label: '播放时长',
					prop: 'times'
				},
				// {
				//   label: '播放次数',
				//   prop: 'type_des'
				// },
				{
					label: '备注信息',
					prop: 'remarks'
				},
				{
					label: '更新时间',
					prop: 'ctime',
					formatter: e => this.getDeta(new Date(e.ctime).getTime())
				},
				// {
				//     label: '播放设备数量',
				//     prop: 'devCount'
				// },
				{
					label: '启用状态',
					type: 'switch',
					prop: 'status',
					values: [1, 2],
					change: row => this.changeOnline(row)
				},

				{
					label: '操作',
					type: 'button',
					width: 180,
					btnList: [
						{
							label: '编辑',
							type: 'primary',
							handle: row => this.elFormDetail(row)
							// isShow: () => this.apis.showBtn(73, this)
						},
						{
							label: '删除',
							type: 'primary',
							handle: row => {
								this.$confirm('确定要删除吗?', '提示', {
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning'
								})
									.then(async () => {
										var res = await this.apis.advert_del({
											id: row.id
										})
										this.$message({
											type: 'success',
											message: '删除成功!'
										})
										this.init()
									})
									.catch(() => { })
							}
						}
					]
				}
			],
			tablePage: { limit: 10, page: 1, total: 0 },
			// 编辑 页面的数据源
			formData: {
				name: '',
				type: '',
				times: '',
				url: '',
				remarks: '',
				status: ''
			},
			// 编辑 页面的form
			formCols: [
				{ type: 'input', label: '广告名称', width: 350, prop: 'name', rmblock: true, remark: '广告名称只是作为辨别多个广告条目之用，并不显示在广告中' },
				// { type: "select", label: "广告类型", width: 350, prop: "type", rmblock: true, remark: '',options:[
				//     {label:'图片',value:'1'},
				//     {label:'视频',value:'2'},
				//   ] },
				{
					type: 'upload',
					label: '广告素材',
					width: 200,
					prop: 'url',
					remark: '只能上传jpg/png/MP4格式文件',
					rmblock: true,
					success: (res, file) => {
						console.log(res)
						this.$refs.elForm.loading = false
						this.formData.url = res.fileName
						this.formData.type = res.fileName.search(/.mp4/i) == -1 ? '1' : '2'
					}
				},
				{
					type: 'input',
					label: '播放时间',
					width: 350,
					prop: 'times',
					rmblock: false,
					remark: '秒',
					isShow: () => {
						return this.type == 2 ? true : false
					}
				},
				{ type: 'input', label: '备注信息', multiple: true, width: 350, prop: 'remarks', options: [] },
				{ type: 'select', label: '位置', width: 350, prop: 'status', options: [{ label: '主屏', value: '1' }] }
			],
			// 新增 编辑 按钮的提示
			formRules: {
				name: [{ required: true, message: '请输入', trigger: 'blur' }],
				type: [{ required: true, message: '请选择', trigger: 'blur' }],

				times: [{ required: true, message: '请输入', trigger: 'blur' }],
				url: [{ required: true, message: '请上传', trigger: 'blur' }],
				remarks: [{ required: true, message: '请输入', trigger: 'blur' }],
				status: [{ required: true, message: '请选择', trigger: 'blur' }]
			},
			// 新增 编辑 按钮 打开页面的 取消 与确认按钮
			formHandle: [
				{
					label: '取消',
					handle: e => this.elFormVisible()
				},
				{
					label: '确定',
					type: 'success',
					handle: e => this.elFormSubmit()
				}
			]
		}
	},

	computed: {},
	mounted() {
		this.init()

		// 遍历视频数据源
		for (var i = 0; i < 2; i++) {
			//获取四个视频的id
			var video = document.getElementById("startvideo" + i);
			console.log(video, '=============');
			//调用video标签的播放函数
			video.play();
		}


	},

	methods: {

		// 拿到分页数据，渲染列表
		async init() {
			let parm = {
				...this.searchData,
				...{
					pageNum: this.tablePage.page,
					pageSize: this.tablePage.limit
				}
			}
			let res = await this.apis.advert_list(parm)
			if (res) {
				this.tablePage.total = res.total
				var list = res.rows || []
				this.tableData = list
			}
			// this.getDevList()
		},

		async getDevList() {
			this.formCols[2].options = []
			let res2 = await this.api.getAdvertList({ devType: 1 })
			if (res2) {
				for (let i = 0; i < res2.data.length; i++) {
					this.formCols[2].options.push({
						value: res2.data[i].equipmentNo,
						name: res2.data[i].name
					})
				}
				this.tableData.map(item => {
					// item.eq = []
					item.equipmentNos = item.equipmentNos.split(',')
					// for (let i = 0; i < item.equipmentNos.length; i++) {
					//     item.eq.push(this.formCols[2].options.filter(it => it.value == item.equipmentNos[i])[0])
					// }
				})
			}
		},
		// 编辑按钮页面的启动按钮的方法
		async changeOnline(row) {
			let res = await this.apis.advert_updata({
				id: row.id,
				status: row.status
			})

			this.$message({
				message: '操作成功',
				type: 'success'
			})
		},
		// 新增 编辑 按钮 打开页面的  确认按钮
		async elFormSubmit(row) {
			this.$refs.elForm.$refs.ruleForm.validate(async valid => {
				if (valid) {
					if (this.formData.id) {
						let res = await this.apis.advert_updata(this.formData)
						if (res) {
							this.init()
							this.elFormVisible()
						}
					} else {
						let res = await this.apis.advert_save(this.formData)
						if (res) {
							this.init()
							this.elFormVisible()
						}
					}
				}
			})
		},
		//点击  新增 编辑按钮的方法
		elFormDetail(row) {
			Object.keys(this.formData).forEach(key => {
				this.formData[key] = row[key] + ''
			})
			this.formData.id = row.id
			this.elFormVisible()
		}
	}
}
</script>
<style scoped lang="scss">
.el-icon-search {
	margin-right: 10px;
}

.Tip {
	margin-left: 20px;
}

// 视频
video {
	object-fit: fill;
}
</style>
